<div class="panel panel-default panel-intro">
    <div class="panel-heading">
        <h3 class="panel-title">工序统计</h3>
    </div>
    <div class="panel-body">
        <!-- 统计概览 -->
        <div class="row">
            <div class="col-md-3">
                <div class="info-box">
                    <span class="info-box-icon bg-blue"><i class="fa fa-cogs"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">工序总数</span>
                        <span class="info-box-number">{$data.total}</span>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="info-box">
                    <span class="info-box-icon bg-green"><i class="fa fa-check"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">启用工序</span>
                        <span class="info-box-number">{$data.active}</span>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="info-box">
                    <span class="info-box-icon bg-red"><i class="fa fa-times"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">停用工序</span>
                        <span class="info-box-number">{$data.inactive}</span>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="info-box">
                    <span class="info-box-icon bg-yellow"><i class="fa fa-clock-o"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">平均报工次数</span>
                        <span class="info-box-number">{$data.avg_work_count|default:0}</span>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 工序报工统计 -->
        <div class="row">
            <div class="col-md-12">
                <div class="box">
                    <div class="box-header with-border">
                        <h3 class="box-title">工序报工统计</h3>
                    </div>
                    <div class="box-body">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>工序名称</th>
                                    <th>工序顺序</th>
                                    <th>报工次数</th>
                                    <th>总报工数量</th>
                                    <th>平均报工数量</th>
                                    <th>状态</th>
                                </tr>
                            </thead>
                            <tbody>
                                {foreach $processStats as $process}
                                <tr>
                                    <td>{$process.name}</td>
                                    <td>{$process.sequence}</td>
                                    <td>{$process.work_count|default:0}</td>
                                    <td>{$process.total_quantity|default:0}</td>
                                    <td>{$process.avg_quantity|default:0}</td>
                                    <td>
                                        {if $process.status == 1}
                                            <span class="label label-success">启用</span>
                                        {else}
                                            <span class="label label-danger">停用</span>
                                        {/if}
                                    </td>
                                </tr>
                                {/foreach}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 报工趋势图 -->
        <div class="row">
            <div class="col-md-12">
                <div class="box">
                    <div class="box-header with-border">
                        <h3 class="box-title">最近7天报工趋势</h3>
                    </div>
                    <div class="box-body">
                        <div id="daily-stats-chart" style="height: 400px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<script>
$(function() {
    // 初始化图表
    var chart = echarts.init(document.getElementById('daily-stats-chart'));
    
    // 图表数据
    var dailyStats = {$dailyStats};
    var dates = [];
    var counts = [];
    var quantities = [];
    
    dailyStats.forEach(function(item) {
        dates.push(item.date);
        counts.push(item.count);
        quantities.push(item.quantity);
    });
    
    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        legend: {
            data: ['报工次数', '报工数量']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: dates,
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '报工次数',
                min: 0,
                interval: 1,
                axisLabel: {
                    formatter: '{value} 次'
                }
            },
            {
                type: 'value',
                name: '报工数量',
                min: 0,
                axisLabel: {
                    formatter: '{value} 件'
                }
            }
        ],
        series: [
            {
                name: '报工次数',
                type: 'bar',
                data: counts,
                itemStyle: {
                    color: '#3c8dbc'
                }
            },
            {
                name: '报工数量',
                type: 'line',
                yAxisIndex: 1,
                data: quantities,
                itemStyle: {
                    color: '#00a65a'
                },
                lineStyle: {
                    width: 3
                }
            }
        ]
    };
    
    chart.setOption(option);
    
    // 响应式处理
    window.addEventListener('resize', function() {
        chart.resize();
    });
});
</script>
